<template>
  <div class="chongzhi">
    <nav class="nav">
      <a class="back" @click="$router.back()">
        <i class="iconfont icon-arrow_left"></i>
      </a>
    </nav>
    <div class="shurumoney">
      <section class="money">
        <input type="text" maxlength="11" placeholder="请输入充值金额" v-model="money2">
      </section>
      <button class="money_submit" @click="chongzhi">充值</button>
    </div>
    <!--调用提示框组件-->
    <!--绑定自定义事件closeTip并且创建closeTip函数,函数隐藏提示框-->
    <AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip"></AlertTip>
  </div>
</template>
<script>
import AlertTip from "../../components/AlertTip/AlertTip.vue";
import {reqChongZhi} from "../../api";
export default {
  data() {
    return {
      money2: '',
      alertText: "", //提示框中显示文本
      alertShow: false //提示框是否显示控制变量
    };
  },

  methods: {
    //关闭[隐藏]提示框组件
    closeTip() {
      this.alertShow = false; //隐藏提示框组件
      this.alertText = ""; //清除提示文字
    },
    //显示提示框组件
    showAlert(alertText) {
      this.alertText = alertText; //将参数字符串赋值
      this.alertShow = true; //显示框
    },
    async chongzhi() {
      let reg=/\d/;
      if (!reg.test(this.money)) {
        this.showAlert("充值金额不规范");
      }
      const money2 = Number(this.money2);  //充多少
      const money1= this.$store.state.userInfo.money; //原先有多少
      const result = await reqChongZhi({money1,money2});
      if(result.code>0){
          this.showAlert("充值成功");
          this.$store.dispatch("getUserInfo");  //调用vuex里的action里的getUserInfo
      }
    }
  },
  components: {
    //注册使用提示组件
    AlertTip
  }
};
</script>
<style lang='stylus' rel='stylesheet/stylus' scoped>
.chongzhi {
  height: 100%;
  position: relative;
  background: #fff;
  color: #fff;
  overflow: hidden;

  .nav {
    height: 40px;
    padding: 5px 10px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    .back {
      position: absolute;
      top: 10px;
      left: 0;

      .icon-arrow_left {
        display: block;
        padding: 5px;
        font-size: 20px;
        color: #666;
      }
    }
  }

  .shurumoney {
    display: block;

    input {
      width: 100%;
      height: 100%;
      padding-left: 10px;
      box-sizing: border-box;
      border: 1px solid #ddd;
      border-radius: 4px;
      outline: 0;
      font: 400 14px Arial;

      &:focus {
        border: 1px solid #02a774;
      }
    }

    .money {
      position: relative;
      margin-top: 16px;
      height: 48px;
      font-size: 14px;
      background: #fff;
    }

    .money_submit {
      display: block;
      width: 100%;
      height: 42px;
      margin-top: 30px;
      border-radius: 4px;
      background: #4cd96f;
      color: #fff;
      text-align: center;
      font-size: 16px;
      line-height: 42px;
      border: 0;
    }
  }
}
</style>